import React, {Component} from 'react';
import {Grid,Button,Dialog,Input,Radio,Feedback,NumberPicker} from '@icedesign/base';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import API from '../../../../../../../../tools/API';
const {Row, Col} = Grid;
const { Group: RadioGroup } = Radio;
/**
*  添加字典
*/
export default class AddDict extends Component{
  constructor(props) {
     super(props);
     this.state = {
        visible: false,
        dict:{
          type:"0",
          sort:10,
        }
     }
  }

  onOpen = () => {
    if (this.props.dict != undefined) {
      this.setState({
        visible: true,
        dict:this.props.dict
      })
    }else {
      API.getDictMaxSort({parent_id:0}).then((res) => {
        //获取最大排序码
        this.setState({
          visible: true,
          dict:{
            type:"0",
            sort:res.result.sort,
            parent_id:this.props.parentId
          }
        })
      });
    }
  };

  onClose = () => {
    this.setState({
      visible: false,
    })
  };

  //保存
  onOk = () => {
    this.refs.form.validateAll((errors, values) => {
      if(errors == null){
        API.saveDict(this.state.dict).then((res) => {
          if (this.props.dict != undefined) {
            Feedback.toast.success("更新成功");
          }else {
            Feedback.toast.success("添加成功");
          }
          this.onClose();
          this.props.reload();
        });
      }
    });
  }

  render(){
    return(
      <span>
        {
          this.props.dict != undefined ?
            <a href="javaScript:;" onClick={this.onOpen}>编辑</a>
          :
            <Button onClick={this.onOpen} type="primary"> + 添加 </Button>
        }
        <Dialog
          visible={this.state.visible}
          onOk={this.onOk}
          onCancel={this.onClose}
          onClose={this.onClose}
          title="新增字典"
          className="add-user-dialog"
        >
          <IceFormBinderWrapper
            value={this.state.dict}
            ref="form">
              <Row wrap={true} justify='center'>
                <Col span='24'>
                  <Row justify='center'>
                    <Col s='9' xxs='6' className="add-user-label">父级字典：</Col>
                    <Col s='15' xxs='18' >
                        <Input disabled={true} value={this.props.parentValue} />
                    </Col>
                  </Row>
                </Col>
                <Col span='24'>
                  <Row justify='center'>
                    <Col s='9' xxs='6' className="add-user-label">字典标签：</Col>
                    <Col s='15' xxs='18' >
                      <IceFormBinder required={true} message={"不能为空"} name="label" >
                        <Input />
                      </IceFormBinder>
                      <div><IceFormError className="err" name="label" /></div>
                    </Col>
                  </Row>
                </Col>
                <Col span='24'>
                  <Row justify='center'>
                    <Col s='9' xxs='6' className="add-user-label">字典值：</Col>
                    <Col s='15' xxs='18' >
                      <IceFormBinder required={true} message={"不能为空"} name="value" >
                        <Input />
                      </IceFormBinder>
                      <div><IceFormError className="err" name="value" /></div>
                    </Col>
                  </Row>
                </Col>
                <Col span='24'>
                  <Row justify='center'>
                    <Col s='9' xxs='6' className="add-user-label">是否显示：</Col>
                    <Col s='15' xxs='18' style={{paddingTop:5}}>
                      <IceFormBinder required={true} message={"不能为空"} name="type" >
                        <RadioGroup onChange = {(val)=>{
                            this.state.dict.type = val;
                            this.setState(this.state);
                          }}>
                          <Radio value={"0"} >启用</Radio>
                          <Radio value={"1"} >停用</Radio>
                        </RadioGroup>
                      </IceFormBinder>
                    </Col>
                  </Row>
                </Col>
                <Col span='24'>
                  <Row justify='center'>
                    <Col s='9' xxs='6' className="add-user-label">显示排序：</Col>
                    <Col s='15' xxs='18'>
                        <NumberPicker type="inline" min={0} onChange={(value)=>{
                            this.state.dict.sort = value
                            this.setState(this.state)
                          }} value={this.state.dict.sort}/>
                    </Col>
                  </Row>
                </Col>
                <Col span='24'>
                  <Row justify='center'>
                    <Col s='9' xxs='6' className="add-user-label">备注：</Col>
                    <Col s='15' xxs='18' >
                      <IceFormBinder name="remarks" >
                        <Input multiple={true} rows={2} maxLength={225} hasLimitHint={true}/>
                      </IceFormBinder>
                      <div><IceFormError className="err" name="remarks" /></div>
                    </Col>
                  </Row>
                </Col>
              </Row>
         </IceFormBinderWrapper>
        </Dialog>
      </span>
    )
  }

}
